<template>
    <div>
        <div
            v-for="(div, index) in home_web_diy"
        >

            <div v-if="div.type == 'type3'">
                <div class="bg-curved"></div>
                <v-container class="pb-0 white--text" style="position: relative">
                    <v-row no-gutters dense>
                        <v-col class="d-flex align-center">
                            <v-avatar
                                size="24"
                                style="border: 2px solid white"
                                color="white"
                            >
                                <v-img :src="div.form.app_url"></v-img>
                            </v-avatar>
                            <h2 class="ml-1">{{div.form.app_name}}</h2>
                        </v-col>
                    </v-row>
                </v-container>
            </div>
            <div v-if="div.type == 'type4'">
                <v-container>
                    <v-carousel
                        :continuous="true"
                        :show-arrows="false"
                        cycle
                        hide-delimiters
                        height="150"
                        class="rounded-lg elevation-2"
                    >
                        <v-carousel-item
                            v-for="(item, i) in div.form.targetItem"
                            :key="i"
                            :src="item.url"
                            :target="item.target"
                            @click="goToUrl(item.herf,item.target)"
                            :transition="false"
                        ></v-carousel-item>
                    </v-carousel>
                </v-container>
            </div>
            <div v-if="div.type == 'type5'">
                <v-container>
                    <v-row class="py-6 px-2 grid-btn mt-0" style="padding-bottom: 0 !important">
                        <v-col v-for="(item, i) in div.form.targetItem" :key="i" cols="4" class="d-inline-flex justify-center" style="margin-bottom: 30px">
                            <v-btn
                                link
                                block
                                plain
                                @click="goToUrl(item.herf,item.target)"
                                :ripple="false"
                            >
                                <div class="text-center">
                                    <div>{{item.text}}</div>
                                </div>
                                <div style="height: 56px; width: 56px">
                                    <v-img :src="item.url"></v-img>
                                </div>
                            </v-btn>
                        </v-col>
                    </v-row>
                </v-container>
            </div>
            <div v-if="div.type == 'type6'">
                <v-container>
                    <h3 class="my-2 pl-2 border-left-red">{{div.form.table_title}}</h3>
                    <v-row >
                        <v-col cols="12" sm="6" md="4" v-for="(item, i) in div.form.targetItem" :key="i" style="padding: 12px 12px 0 12px">
                            <v-card >
                                <v-img @click="goToUrl(item.herf,item.target)" contain :src="item.url" ></v-img>
                            </v-card>
                        </v-col>
                    </v-row>
                </v-container>
            </div>
        </div>
    </div>
</template>


<script>
import axios from "axios";
import { mapGetters } from "vuex";



export default {
    data: () => ({
        dialog: false,
        banner: [],
        home_web_diy:[],
        qr_code: "",
        app_name: '',
    }),
    computed: {
        ...mapGetters(["uid"]),
    },
    created() {
        this.load();
    },
    methods: {
        goToUrl(_url,_type){
            if(_url){
                if (_type == '_blank') {
                    window.open(_url, '_blank');
                } else {
                    window.location.href = _url;
                }
            }
        },
        load() {
            axios
                .get(`/v1/home`)
                .then((response) => {
                    this.home_web_diy = response.data.data.home_web_diy;
                })
                .catch(function () {})
                .then(function () {});
        },
    },
};
</script>

<style lang="scss">

.text-truncate {
    white-space: nowrap; /* 保持文本在一行显示 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    max-width: 100%; /* 限制最大宽度，确保不会超出容器 */
}
.truncate-text {
    width: 150px; /* 设置div的宽度，确保能够容纳10个字符 */
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 在文本末尾添加省略号 */
}
.square-avatar {
    border-radius: 0 !important; /* 移除圆角 */
}
.border-left-red {
    border-left: 3px solid #ba2b39;
}

</style>


